<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <body>
  <!-- 1.制作 svg精灵图 -->
   <!-- 把所有的svg精灵图包裹在一个svg标签中 -->
    <!-- 把被包裹的 svg精灵图 的svg标签改为symbol,并添加id属性 -->
   <svg style="display: none;">
     <symbol id="one" t="1673404435705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="32" height="32"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" fill="#303035" p-id="2681"></path></symbol>
     <symbol id="two" t="1672369915136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3852" width="32" height="32"><path d="M94.034199 950.069664V72.633312a71.984801 71.984801 0 0 1 71.336289-72.633312h403.374287a71.984801 71.984801 0 0 1 71.984801 72.633312v121.920203h215.305889a71.984801 71.984801 0 0 1 71.984801 71.9848v683.531349h57.717543a36.316656 36.316656 0 0 1 35.668144 36.316656 35.668144 35.668144 0 0 1-35.668144 35.668145H35.668144A35.668144 35.668144 0 0 1 0 986.38632a36.316656 36.316656 0 0 1 35.668144-36.316656h58.366055z m71.336289 0h403.374287V72.633312H165.370488z m475.359088 0h215.305889V267.835339H640.729576zM259.404687 241.89487h207.523749a35.668144 35.668144 0 0 1 35.668144 36.316656 35.668144 35.668144 0 0 1-35.668144 35.668145H259.404687a35.668144 35.668144 0 0 1-35.668145-35.668145 35.668144 35.668144 0 0 1 35.668145-36.316656z m0 233.464218h207.523749a35.668144 35.668144 0 0 1 35.668144 36.316656 35.668144 35.668144 0 0 1-35.668144 35.668145H259.404687a35.668144 35.668144 0 0 1-35.668145-35.668145 35.668144 35.668144 0 0 1 35.668145-36.316656z m0 233.464218h207.523749a35.668144 35.668144 0 0 1 35.668144 36.316656 35.668144 35.668144 0 0 1-35.668144 33.074098H259.404687a35.668144 35.668144 0 0 1-35.668145-35.668145 35.668144 35.668144 0 0 1 35.668145-33.722609z m488.977834-308.691577a35.668144 35.668144 0 0 1 35.668144 35.668144v71.984801a35.668144 35.668144 0 0 1-35.668144 35.668144 36.316656 36.316656 0 0 1-35.019633-35.668144V435.799873a36.316656 36.316656 0 0 1 36.316656-36.316656z m0 239.300823a35.668144 35.668144 0 0 1 35.668144 35.668145v71.9848a35.668144 35.668144 0 0 1-35.668144 35.668145 36.316656 36.316656 0 0 1-36.316657-35.668145V675.100697a36.316656 36.316656 0 0 1 36.316657-36.316656z" fill="#000000" p-id="3853"></path></symbol>
     <symbol id="three" t="1672369959592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" width="32" height="32"><path d="M912.832 467.104h-22.272l-6.624-22.464h60.928a32 32 0 1 0 0-64h-79.808l-35.584-120.544C815.168 221.28 771.52 192 728 192H302.592c-43.52 0-87.136 29.28-102.112 70.112l-34.944 118.528H96a32 32 0 0 0 0 64h50.624l-6.624 22.464H128c-35.296 0-64 28.704-64 64v282.944h51.104v34.816a32 32 0 1 0 64 0v-34.816h690.528v34.816a32 32 0 1 0 64 0v-34.816h43.232v-282.944a64.128 64.128 0 0 0-64.032-64zM128 750.016v-104.96h73.792c26.464 0 50.528-16.672 59.872-41.408l24.064-63.712c1.088-2.912 1.216-5.888 1.44-8.832h450.528c0.224 2.944 0.352 5.92 1.44 8.832l24.064 63.648a64.256 64.256 0 0 0 59.872 41.472h89.76v104.96H128z m784.832-168.96l-89.76-0.032-18.848-49.952h108.608v49.984zM218.528 426.944a30.944 30.944 0 0 0 2.816-9.568L261.184 282.24c4.48-12.16 23.52-26.24 41.408-26.24H728c17.888 0 36.928 14.08 40.736 24.192l55.104 186.88H206.72l11.808-40.128z m2.144 104.16l-18.88 49.984H128v-49.984h92.672z" p-id="5071" fill="#000000"></path><path d="M614.752 626.24h-188.64a32 32 0 1 0 0 64h188.64a32 32 0 1 0 0-64z" p-id="5072" fill="#000000"></path></symbol>
   </svg>

   <!-- 2.使用 svg精灵图 -->
    <svg>
      <use xlink:href='#one'></use>
    </svg>
    <svg>
      <use xlink:href='#two'></use>
    </svg>
    <svg>
      <use xlink:href='#three'></use>
    </svg>

    <!-- 制作起来很麻烦，使用插件svg-sprite-loader -->
     <!-- 在 vue.config.js 中配置 -->
  </body>
</html>